Step over the square!

 
Move over the box above to change message

Descrizione del problema

Si scriva il codice javascript necessario ad implementare la seguente funzionalità in una pagina HTML: Entrando in una cella di una tabella identificata dall’id “msgbox”, si cambia il testo contenuto scorrendo circolarmente un vettore che contiene le stringhe dei messaggi predefiniti.

Implementazione

Alla casella della tabella identificata dall'attributo id con valore msgBox viene associato un gestore per l'evento onmouseover. L'associazione è eseguita dalla funzione setHandlers() che viene chiamata al verificarsi dell'evento onload della pagina HTML (ovvero si esegue alla fine del caricamento del BODY della pagina in modo da essere sicuri che tutti gli elementi del DOM della pagina siano stati già allocati).

La funzione setHandlers() ottiene il riferimento alla cella con la funzione document.getElementById("msgBox") e assegna all'attributo onmouseover il riferimento alla funzione di gestione dell'evento changeMsg(). Inoltre provvede ad inizializzare l'attributo msgId che memorizza l'indice dell'immagine corrente e il contenuto del nodo col messaggio corrente (innerHTML)

Il gestore dell'evento changeMsg(event) estrae dall'oggetto event il riferimento all'elemento (cella della griglia) in cui si è verificato (event.target) e legge e incrementa l'attributo msgId verificando se ha superato la fine dell'array (nel caso viene reinizializzato a 0 per puntare al primo elemento dell'array). Infine, viene aggiornato il contenuto del nodo (innerHTML) con il nuovo messaggio prelevato dall'array msg.